<template>
    <div class="search-table">
        <div class=alert v-if="$slots.alert">
            <slot name="alert"></slot>
        </div>
        <div class="header">
            <div class="left">
                <!-- <span class="checkbox-group"> -->
                    <slot name="checkbox-group"></slot>
                <!-- </span> -->
                <!-- <span class="datePickert-group"> -->
                    <slot name="datePickert-group"></slot>
                <!-- </span> -->
                <!-- <span class="button-group"> -->
                    <slot name="button-group"></slot>
                <!-- </span> -->
                <!-- <span class="select-group"> -->
                    <slot name="select-group"></slot>
                <!-- </span> -->
                <!-- <span class="input-group"> -->
                    <slot name="input-group"></slot>
                <!-- </span> -->
                <!-- <span class="button-last_group"> -->
                    <slot name="button-last_group"></slot>
                <!-- </span> -->
                <slot name="search"></slot>
            </div>
            <Page :total="total" :current="page" :page-size="size"
                  :page-size-opts="pageSizeOptions"
                  class="page-element"
                  show-total show-elevator show-sizer @on-change="changePage" @on-page-size-change="changePageSize"
                  v-if="pagePos === 'top' && showPage">
            </Page>
        </div>
        <div class="contents">
            <TableList
                ref="searchTable"
                v-bind="_props"
                v-on="_events"
                :showPage="pagePos === 'bottom' && showPage"
            >
            </TableList>
            <!-- @update:page="updatePage"
                @update:selection="updateSelection" -->
            <!-- <slot name="table"></slot>
            <div v-show="loading" class="loading">
                <Icon type="ios-loading" size="32"/>
                <span>{{loadingText}}</span>
            </div> -->
        </div>
        <slot></slot>
    </div>
</template>

<script>
    import propsMixin from '@/components/common/table-list/mixin'
    export default {
        name: 'SearchTable',
        mixins:[propsMixin],
        props: {
            pagePos:{
              type:String,
              default:'top'
            }
        },
        data(){
            return {

            }
        },
        computed: {},
        watch:{

        },
        mounted() {
            // console.log(this)
        },
        methods: {
            delSelectItem(id){
                this.$refs.searchTable.delSelectItem(id)
            }
        }
    }
</script>

<style scoped>
    .search-table{
        display: flex;
        flex-direction: column;
    }
    .contents {
        height: fit-content;
        flex: auto;
    }
    /* .loading {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        margin-left: -20px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        background-color: rgba(55, 55, 55, .1);
    }
    .loading>i {
        animation: loading 1.1s infinite linear;
    }
    .loading>span{
        margin-top: 10px;
    } */
    .alert {
        margin-top: 15px;
    }
    .header {
        margin: 15px 0 9px 0;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }
    .header > .left {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
    }
    .header > .left >  * {
        margin-right: 10px;
    }
    .header > .page-element {
        margin-left: auto;
    }
    /* .header .datePickert-group
    .header .button-last_group,
    .header .button-group,
    .header .select-group,
    .header .input-group {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
    } */
    /* .header .button-group{
        display: flex;
    }
    .header .button-last_group{
        display: flex;
    } */
    .header .left .ivu-date-picker {
        width: 280px;
    }
    .header .left > .ivu-select {
         width: 150px !important;
    }
    .header .left > .ivu-input-wrapper {
         width: 180px !important;
    }
    .header .condition_width /deep/ div {
        width: 90px;
    }
    .header .condition_width_150 /deep/ div {
        width: 150px;
    }
    .header /deep/ .ivu-cascader-rel .ivu-input{
        border-radius: 20px;
    }
    .header .condition_width_150 /deep/ .ivu-select-selection,
    .header .condition_width_150 /deep/ .ivu-input,
    .header .condition_width /deep/ .ivu-select-selection {
        border-radius: 0px !important;
    }
    .header /deep/ .ivu-checkbox-wrapper {
        display: flex;
        align-items: center;
    }
    .header .ivu-checkbox-wrapper /deep/ label {
        margin-right: 15px;
    }
    .search-table > .header > .left > *{
        margin-bottom: 2px;
    }
    /* .search-table /deep/ .ivu-btn-ghost.ivu-btn-primary:not([disabled]){
        background-color: transparent;
        border: 1px solid #ccc;
        color: #a5a5c6;
        outline: none;
        box-shadow: none;
        -webkit-box-shadow: none;
    }
    .search-table /deep/ .ivu-btn-primary.ivu-btn-ghost:not([disabled]):hover,
    .search-table /deep/ .ivu-btn-default:not([disabled]):hover{
        background-color:transparent;
        border: 1px solid rgb(56 , 56, 211);
        color:rgb(56 , 56, 211);
        opacity: 1;
    }
    .search-table /deep/ .ivu-btn-primary.ivu-btn-ghost:not([disabled]):hover>i,
    .search-table /deep/ .ivu-btn-default:not([disabled]):hover>i{
        color: rgb(56 , 56, 211);
    }

    .search-table /deep/ .ivu-input,.search-table /deep/ .ivu-input-number{
        border: 1px solid #cccccc;
        color: rgb(56 , 56, 211)!important;
    }
    .search-table /deep/ .ivu-input::-webkit-input-placeholder{
        color: rgb(168,166,200)!important;
    }
    .search-table /deep/ .ivu-input:hover,.search-table /deep/ .ivu-input-number:hover{
        border: 1px solid rgb(56 , 56, 211);
    }
    .search-table /deep/ .ivu-input:focus,.search-table /deep/ .ivu-input-number:focus{
        box-shadow:0px 0px 8px rgb(56 , 56, 211);
        border: 1px solid rgb(56 , 56, 211);
        color: rgb(56 , 56, 211)!important;
        outline: none;
    }
    .search-table /deep/ .ivu-input-icon{
        color: rgb(56 , 56, 211);
    }
    .search-table /deep/ .ivu-page-item-active{
        border-color: rgb(56 , 56, 211);
        box-shadow: none;
        outline: none;
    }
    .search-table /deep/ .ivu-page-item:hover,.search-table /deep/ .ivu-page-next:hover,.search-table /deep/ .ivu-page-prev:hover{
        border-color: rgb(56 , 56, 211);
    }
    .search-table /deep/ .ivu-page-item:hover a,
    .search-table /deep/ .ivu-page-next:hover a,
    .search-table /deep/ .ivu-page-prev:hover a,
    .search-table /deep/ .ivu-page-item-jump-prev:hover a,
    .search-table /deep/ .ivu-page-item-jump-next:hover a{
        color:rgb(56 , 56, 211);
    }
    .search-table /deep/ .ivu-page-item-active a{
        color: rgb(56 , 56, 211)!important;
    }
    .search-table /deep/ .ivu-page-options-elevator input:focus{
        border-color: rgb(56 , 56, 211);
        box-shadow:0px 0px 8px rgb(56 , 56, 211);
    }
    .search-table /deep/ .ivu-page-options-elevator input:hover {
        color: rgb(56 , 56, 211)!important;
        border-color: rgb(56 , 56, 211);
        box-shadow:0px 0px 8px rgb(56 , 56, 211);
    }
    .search-table /deep/ .ivu-btn-ghost.ivu-btn-primary[disabled],
	.search-table /deep/ .ivu-btn-ghost.ivu-btn-error[disabled]{
		color: #8f90a6;
		border-color: #8f90a6;
	} */
    /* @keyframes loading {
        0% {
            transform: rotate(0deg);
        }
        100% {
            transform: rotate(360deg);
        }
    } */
</style>
